import React, { useReducer } from 'react';

const initialState = {
  name: 'ahhh'
  ,age: 123
  ,nationality: '汉族'
};


function reducer(state: any,action: any) {
  switch(action.type){
  case 'patch':
    return {...state, ...action.formData};
  case 'reset':
    return initialState;
  default:
    throw new Error();
  }
}

export default function App(){
  console.log('App 执行了一遍');
  const [formData, dispatch] = useReducer(reducer, initialState);

  const onSubmit = () => {
    //
  };
  const onRest = () => {
    dispatch({type: 'reset'});
  };
  return (
    <form onSubmit={onSubmit} onReset={onRest}>
      <div>
        <label>
          姓名
          <input value={formData.name}
            onChange={e=>dispatch({type:'patch',formData:{name:e.target.value}})}
          />
        </label>
      </div>
      <div>
        <label>
          年龄
          <input value={formData.age}
            onChange={e=>dispatch({type:'patch',formData:{age:e.target.value}})}
          />
        </label>
      </div>
      <div>
        <label>
          名族
          <input value={formData.nationality}
            onChange={e=>dispatch({type:'patch',formData:{nationality:e.target.value}})}
          />
        </label>
      </div>
      <div>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
      </div>
      <hr/>
      {JSON.stringify(formData)}
    </form>
  );
}
